<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>14_Promise-Promise类方法race方法</title>
  <!-- 
  在 JavaScript 中， `Promise.race`  是一个静态方法，用于处理多个  `Promise`  实例。与  `Promise.all`  不同， `Promise.race`  只关注第一个完成的  `Promise` （无论是成功或失败），并返回该  `Promise`  的结果。
  1. 基本概念
  -  `Promise.race(iterable)` ：接收一个可迭代对象（通常是数组），该对象包含多个  `Promise`  实例。
  - 该方法返回一个新的  `Promise` ，该  `Promise`  的状态由第一个完成的  `Promise`  决定。

  2. 语法
  Promise.race(iterable);
  -  `iterable` ：一个可迭代对象，通常是一个数组，包含多个  `Promise`  对象。

  3. 返回值
  - 返回一个新的  `Promise` ，其解析值是第一个完成的  `Promise`  的结果。
  - 如果第一个完成的  `Promise`  是成功的，返回的  `Promise`  也会成功，并解析为该  `Promise`  的值。
  - 如果第一个完成的  `Promise`  是失败的，返回的  `Promise`  将被拒绝，并返回该  `Promise`  的拒因。

  4. 示例代码
   4.1 使用  `Promise.race`
  const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
  const promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'Second'));
  const promise3 = new Promise((_, reject) => setTimeout(reject, 150, 'Error occurred'));

  Promise.race([promise1, promise2, promise3])
      .then(result => {
          console.log(result); // 输出: 'First' （因为它是第一个完成的 Promise）
      })
      .catch(error => {
          console.log(error); // 如果第一个完成的是失败的 Promise，这里会输出错误信息
      });
  5. 注意事项
  -  `Promise.race`  适用于需要处理多个异步操作，但只关心第一个完成的操作的场景。例如，可以用于实现超时机制。
  - 如果传入的可迭代对象为空， `Promise.race`  返回一个已拒绝的  `Promise` 。

  6. 总结
  `Promise.race`  是处理多个  `Promise`  的一种有用方法，它允许开发者在多个异步操作中只关注第一个完成的操作。这种特性在需要快速响应的场景中非常有用，例如超时处理和竞态条件。理解  `Promise.race`  的用法可以帮助开发者更有效地管理异步操作。
  -->
</head>
<body>

  <script>
    // 创建三个 Promise 实例
    const p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        // resolve('resolve p1')
        reject('reject p1')
      }, 1000)
    })

    const p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        reject('reject p2')
      }, 2000)
    })

    const p3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('resolve p3')
      }, 3000)
    })

    // Promise.race() 类方法，只要有一个 Promise 实例状态改变，就会返回一个 Promise 实例
    Promise.race([p1, p2, p3])
      .then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })

  </script>
  
</body>
</html>